<template>
    <div class="sidebar-right" ref="d3CanvasRef" style="height: 77vh; width: 100%;">
      <svg class="d3CanvasSvg"></svg>
    </div>
    <!-- <div style="margin-top:5px;">请输入深度： <el-input-number v-model="depth"></el-input-number></div> -->
  </template>
  <script setup >
  import * as d3 from "d3";
  import { initChart, appendAxis, appendZoom, appendGrid } from "@/api/canvas.ts";
  import { initOpenHole } from "@/api/openHole"
  import openHoleStore from '@/store/modules/openHoleDraw'
  import d3DrawStore from '@/store/modules/d3Draw'
  const emit = defineEmits(["click", "dom", "render"]);
  const d3Store = d3DrawStore()
  const drawOpenHole = openHoleStore()
  const d3CanvasRef = ref(null)
  const selectedDom = ref(null)
  const depth = ref(5000)
  //最大深度
  watch(depth, (newVal, oldVal) => {
    let $ = initChart(d3.selectAll(".d3CanvasSvg"), d3CanvasRef.value.offsetWidth, d3CanvasRef.value.offsetHeight - 5);
    d3.selectAll(
      "g").remove();
    appendAxis($, "y", "right", newVal);
  });
  
  onMounted(() => {
    //执行画布初始化 -- 并且返回 dom
    let $ = initChart(d3.selectAll(".d3CanvasSvg"), d3CanvasRef.value.offsetWidth, d3CanvasRef.value.offsetHeight - 5);
    d3Store.set$($)
    d3Store.setCanvas(d3CanvasRef.value)
    emit('render')
    // 新增缩放规则
    appendZoom($, 1, 60);
    // 初始化坐标轴 Y
    appendAxis($, "y", "right", depth.value);
    // 新增网格线
    appendGrid($, 10);
  
    // if (drawOpenHole.openHole == null ) { drawOpenHole.openHole = initOpenHole($, d3Store.d3Canvas ,60, 0 ,depth.value ); }
  });
  
  defineExpose({
    $: selectedDom,
  });
  </script>
  
  <style scoped>
  .sidebar-right {
    flex: 0 0 50%;
    background-color: rgb(250, 250, 250);
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 1);
    border: 1px solid rgba(0, 0, 0, 0.2);
    transition: transform 0.3s;
  }
  
  .sidebar-right:hover {
    border-color: rgba(0, 0, 0, 0.5);
  }
  </style>